import React from 'react';
import TabsStyle from './Tabs.less';
import cx from 'classnames';

export default class Tabs extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
    lables: React.PropTypes.array,

  };

  constructor(props) {
    super(props);
  }
  state ={
  	visibleIndex:0
  };
  handleSwitch =(index) => {
  	this.setState({
  		visibleIndex:index
  	})
  };
  render() {
  	let { Tablables=[], charts=[] } = this.props;
  	let { visibleIndex } = this.state;
  	let ceilWidth = Math.floor(100/Tablables.length)+'%';
    let nodes = [];
  	let lablesHeader = Tablables.reduce((nodes, item, index)=> {
        nodes.push(
          <span onClick={()=>this.handleSwitch(index)} key={index} 
              className={cx({'checked':visibleIndex==index})} 
              style={{width:ceilWidth}}>
              {item}
          </span>
          );

          if (index != Tablables.length - 1) {
            nodes.push(<span key={index + 0.1} className='spliter'></span>)
          };
  	  		return nodes
  	  	},[]);
  	let tabsContent = charts.map((item, index) => {
  		return <TabContent visible={visibleIndex==index} key={index}>{item}</TabContent>
  	});
    return (
      <div className={TabsStyle.tabs}>
      	{lablesHeader}
      	<div className='topLine'>
      		{tabsContent}
      	</div>
      </div>
    );
  }
}
class TabContent extends React.Component {
	static propTypes = {
    name: React.PropTypes.string,
    visible: React.PropTypes.bool,

  };
	constructor(props) {
		super(props);
	}

	render() {
		let { children, visible = false } = this.props; 

		return (
			<div className={TabsStyle.tabContent} >
				{visible && children}
			</div>
		);
	}
}